{extend name="../../base/view/common/base" /}
<!-- 主体 -->
{block name="body"}
<form class="layui-form p-4">
    {if condition="$id eq 0"}
    <h3 class="pb-3">添加律所信息</h3>
    {else /}
    <h3 class="pb-3">编辑律所信息</h3>
    {/if}
    <table class="layui-table layui-table-form">
        <tr>
            <td class="layui-td-gray">律所名称<font>*</font></td>
            <td>
                <input type="text" name="title" value="{$detail.title|default=''}" lay-verify="required" autocomplete="off" placeholder="请输入律所名称" lay-reqText="请输入律所名称" class="layui-input">
            </td>
        </tr>
        <tr>
            <td class="layui-td-gray">律所地址<font>*</font></td>
            <td>
                <div class="layui-form-item" style="margin-bottom: 10px;">
                    <div class="layui-input-inline">
                        <select name="provinceid" lay-filter="provinceid" lay-verify="required" lay-reqText="请选择省份">
                            <option value="">请选择省份</option>
                            <!-- 省份选项 -->
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <select name="cityid" lay-filter="cityid" lay-verify="required" lay-reqText="请选择城市">
                            <option value="">请选择城市</option>
                            <!-- 城市选项 -->
                        </select>
                    </div>

                    <div class="layui-input-inline">
                        <select name="distid" lay-filter="distid">
                            <option value="">请选择区/县</option>
                            <!-- 区/县选项 -->
                        </select>
                    </div>
                </div>
                <!-- 详细地址输入框 -->
                <input type="text" name="address" value="{$detail.address|default=''}" autocomplete="off" lay-verify="required" lay-reqText="请输入详细地址" placeholder="请输入详细地址" class="layui-input">
            </td>
        </tr>
    </table>
    <div class="py-3">
        <input type="hidden" name="id" value="{$id}">
        <button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="webform">立即提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
{/block}
<!-- /主体 -->

<!-- 脚本 -->
{block name="script"}
<script>
    const moduleInit = ['tool'];
    function gouguInit() {
        var form = layui.form, tool = layui.tool, layer = layui.layer;

        // 判断是否为编辑模式
        var isEditMode = '{$id}' != '0';
        var provinceId = isEditMode ? '{$detail.provinceid}' : '';
        var cityId = isEditMode ? '{$detail.cityid}' : '';
        var distId = isEditMode ? '{$detail.distid}' : '';

        // 加载地区选项数据
        function loadRegionOptions(selectName, url, params = {}) {
            // 显示加载中状态
            let $select = $(`select[name="${selectName}"]`);
            $select.html('<option value="">加载中...</option>');
            form.render('select');
            
            // 使用jQuery的AJAX请求，与原代码保持一致
            $.get(url, params)
               .done(function(data) {
                    if (data && data.data && Array.isArray(data.data)) {
                        var redata = data.data;
                        var html = '<option value="">请选择</option>';
                        for (var i = 0; i < redata.length; i++) {
                            var selected = params.selectedId && redata[i].id == params.selectedId ? 'selected' : '';
                            html += `<option value="${redata[i].id}" ${selected}>${redata[i].name}</option>`;
                        }
                        $select.html(html);
                    } else {
                        $select.html('<option value="">加载失败</option>');
                        layer.msg('加载地区数据失败');
                    }
                    form.render('select');
                })
               .fail(function(jqXHR, textStatus, errorThrown) {
                    $select.html('<option value="">加载失败</option>');
                    layer.msg(`加载地区选项失败: ${textStatus}`);
                    form.render('select');
                });
        }

        // 初始化省份数据
        loadRegionOptions('provinceid', '/home/api/regionProvinces', { selectedId: provinceId });

        // 如果是编辑模式，预加载城市数据
        if (provinceId) {
            loadRegionOptions('cityid', '/home/api/regionCitys', { provinceId: provinceId, selectedId: cityId });
        }

        // 如果是编辑模式，预加载区县数据
        if (cityId) {
            loadRegionOptions('distid', '/home/api/regionDists', { cityId: cityId, selectedId: distId });
        }

        // 监听省份选择变化
        form.on('select(provinceid)', function(data) {
            var provinceId = data.value;
            if (provinceId) {
                // 加载城市选项
                loadRegionOptions('cityid', '/home/api/regionCitys', { provinceId: provinceId });
                // 清空区县选择
                $('select[name="distid"]').html('<option value="">请选择区/县</option>');
            } else {
                $('select[name="cityid"]').html('<option value="">请选择城市</option>');
                $('select[name="distid"]').html('<option value="">请选择区/县</option>');
                form.render();
            }
        });

        // 监听城市选择变化
        form.on('select(cityid)', function(data) {
            var cityId = data.value;
            if (cityId) {
                // 加载区/县选项
                loadRegionOptions('distid', '/home/api/regionDists', { cityId: cityId });
            } else {
                $('select[name="distid"]').html('<option value="">请选择区/县</option>');
                form.render();
            }
        });

        // 监听表单提交
        form.on('submit(webform)', function(data) {
            // 表单数据验证
            if (!data.field.title || !data.field.provinceid || !data.field.cityid) {
                layer.msg('请完整填写律所信息');
                return false;
            }
            
            // 显示提交中的加载状态
            var loadIndex = layer.load(1, {shade: [0.1, '#fff']});
            
            tool.post("/lawyer/lawfirm/add", data.field, function(res) {
                layer.close(loadIndex);
                layer.msg(res.msg || '操作完成');
                if (res.code == 0) {
                    tool.sideClose(1000); // 成功后关闭页面
                }
            });
            return false;
        });
    }
</script>
{/block}
<!-- /脚本 -->